<!--
 * @Author: your name
 * @Date: 2021-04-01 17:38:26
 * @LastEditTime: 2021-05-20 12:18:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \svn-solax-cloud-system\src\components\common\baseForm.vue
-->
<template>
    <div class="baseForm-main-box">
        <el-form ref="form" :model="form" :label-width="option.labelWidth?option.labelWidth:'auto'">
            <el-row :gutter="20" >
                <el-col :span="returnSpan()" :offset="returnOffset()" v-for='(item,index) in optionC.data' :key='item.name'>
                    <el-form-item :label="item.lable" :prop="item.name" :rules="item.rules" v-if='item.show===false?false:true'>
                        <el-input v-if='item.type == "input"&& item.big' v-big v-model="form[item.name]" :placeholder="$t('common.info.pl-insert-content')" @change='returnForm(item.watch,form[item.name])'></el-input>
                        <el-input v-if='item.type == "input"&& !item.big' v-model="form[item.name]" :placeholder="$t('common.info.pl-insert-content')" @change='returnForm(item.watch,form[item.name])'></el-input>
                        <el-select v-if='item.type == "select" ' v-model="form[item.name]" filterable :placeholder="$t('index.selectStates')" clearable style="width:100%" @change='returnForm(item.watch,form[item.name])'>
                            <el-option
                                v-for="items in item.data"
                                :key="items[item.selectValue] || items.id"
                                :label="items[item.selectLable] || items.text"
                                :value="items[item.selectValue] || items.id">
                            </el-option>
                        </el-select>
                        <el-checkbox @change='returnForm(item.watch,form[item.name])' v-if='item.type == "checkbox"' v-model="form[item.name]">{{item.name}}</el-checkbox>
                        <file v-if='item.type == "file"' @change='returnForm(item.watch,form[item.name])' v-model="form[item.name]"></file>
                        <el-date-picker
                        v-if='item.type == "item" && item.spa'
                        v-model="form[item.name]"
                        type="date"
                        :placeholder="$t('selectDate')"
                        value-format='yyyy-MM-dd'
                        :clearable='true'
                        :picker-options="item.pickerOptions || ''"
                        @change='returnForm(item.watch,form[item.name])'
                        >
                        </el-date-picker>
                        <el-date-picker
                        v-if='item.type == "item" && !item.spa'
                        v-model="form[item.name][0]"
                        type="date"
                        :placeholder="$t('selectDate')"
                        value-format='yyyy-MM-dd'
                        :clearable='true'
                        :picker-options="item.pickerOptions || ''"
                        @change='returnForm(item.watch,form[item.name])'
                        >
                        </el-date-picker>
                        <span v-if='item.type == "item" && !item.spa'> - </span>
                        <el-date-picker
                        v-if='item.type == "item" && !item.spa'
                        v-model="form[item.name][1]"
                        type="date"
                        :placeholder="$t('selectDate')"
                        value-format='yyyy-MM-dd'
                        :clearable='true'
                        :picker-options="item.pickerOptions || ''"
                        @change='returnForm(item.watch,form[item.name])'
                        >
                        </el-date-picker>
                        <slot v-if='item.type == "slot"' :data='{item,form}'  :name='item.slot' >
                            {{item.slot}}
                        </slot>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import file from './baseFileInput'
export default {
    components: {
        file
    },
    props: {
        option:{
            type:Object,
            default:()=>{return{}}
        },
        
    },
    data() {
        return {
            form:{
            },
            
        };
    },
    computed: {
        optionC(){
            return this.option
        }
    },
    watch: {
        optionC:{
            handler(nv,ov){
                if(nv &&  nv.data && nv.data.length>0){
                    nv.data.forEach(item =>{
                        if(item.type=='checkbox'){
                            if(item.value || item.value === 0 || item.value === false){
                                this.$set(this.form,item.name,item.value)
                            }else{
                                this.$set(this.form,item.name,false)
                            }
                            
                        }else if(item.type=='item' && !item.spa){
                            if(item.value.length == 2){
                                this.$set(this.form,item.name,item.value)
                            }else{
                                this.$set(this.form,item.name,['',''])
                            }
                        }else {
                            if(item.value || item.value === 0 || item.value === false){
                                this.$set(this.form,item.name,item.value)
                            }else{
                                this.$set(this.form,item.name,'')
                            }
                        }
                        
                    })
                }
            },
            deep:true,
            immediate:true
        }
    },
    created() {

    },
    mounted() {
    },
    methods: {
        save(){
            let status = true
            this.$refs['form'].validate((valid) => {
              if (valid) {
                this.$emit('input',this.form)
                status =  true;
              } else {
                status =  false;
              }
            });
            return status
        },
        returnForm(watch,val){
            if(watch){
                watch(val)
            }
            this.$emit('input',this.form)
        },
        returnSpan(){
            if(this.option.columnNum){
                if(this.option.columnNum == 1){
                    return 14
                }else {
                    return 24/this.option.columnNum
                }
            }else {
                return 14
            }
        },
        returnOffset(){
            if(this.option.columnNum){
                if(this.option.columnNum == 1){
                    if(this.option.offset){
                        return this.option.offset
                    }else {
                        return 5
                    }
                }else {
                    return 0
                }
            }else {
                return 5
            }
        }
    },
};
</script>

<style  lang="less" >
    .baseForm-main-box{
        width: 100%;
        .el-form-item__content{
            display: flex;
            height: 32px;
            align-items: center;
        }
    }
</style>
